<template>
	<view class="container">
		<!-- 顶部导航栏 -->
		<view class="navbar">
			<view class="title">闲置换钱</view>
			<view class="search-box" @click="goToSearch">
				<input class="search-input" placeholder="搜索闲置好物" disabled />
				<view class="search-icon">🔍</view>
			</view>
			<view class="nav-icons">
				<view class="icon">&#xe65a;</view>
				<view class="icon">&#xe65b;</view>
			</view>
		</view>

		<!-- 轮播图 -->
		<Banner :banners="banners" />

		<!-- 分类导航 -->
		<Category :categories="categories" />

		<!-- 热门推荐 -->
		<HotProducts :hotProducts="hotProducts" />

		<!-- 附近的闲置 -->
		<Nearby :nearby="nearby" />

		<!-- 底部导航栏（可单独做成组件） -->
	<!-- 	<view class="tabbar">
			<view class="tabbar-item active">
				<text class="tabbar-icon">&#xe650;</text>
				<text class="tabbar-text">首页</text>
			</view>
			<view class="tabbar-item">
				<text class="tabbar-icon">&#xe652;</text>
				<text class="tabbar-text">发现</text>
			</view>
			<view class="tabbar-item plus">
				<text class="tabbar-icon">&#xe654;</text>
			</view>
			<view class="tabbar-item">
				<text class="tabbar-icon">&#xe65b;</text>
				<text class="tabbar-text">消息</text>
			</view>
			<view class="tabbar-item">
				<text class="tabbar-icon">&#xe655;</text>
				<text class="tabbar-text">我的</text>
			</view>
		</view> -->
	</view>
</template>

<script>
	import Banner from './components/Banner.vue'
	import Category from './components/Category.vue'
	import HotProducts from './components/HotProducts.vue'
	import Nearby from './components/Nearby.vue'

	export default {
		components: { Banner, Category, HotProducts, Nearby },
		data() {
			return {
				banners: [
					'https://picsum.photos/800/300?random=1',
					'https://picsum.photos/800/300?random=2',
					'https://picsum.photos/800/300?random=3'
				],
				categories: [
					{ icon: '💻', text: '数码', bg: 'bg-primary' },
					{ icon: '🛍️', text: '服装', bg: 'bg-secondary' },
					{ icon: '📚', text: '书籍', bg: 'bg-green' },
					{ icon: '🎮', text: '游戏', bg: 'bg-blue' },
					{ icon: '➕', text: '更多', bg: 'bg-purple' }
				],
				hotProducts: [
					{
						img: 'https://picsum.photos/400/300?random=10',
						title: '小米10 8+128G 蓝色 95新',
						price: 1899,
						distance: '1.2km',
						avatar: 'https://picsum.photos/20/20?random=100',
						user: '小米爱好者',
						time: '1小时前'
					},
					{
						img: 'https://picsum.photos/400/300?random=11',
						title: 'MacBook Pro 13.3 银色',
						price: 4599,
						distance: '2.5km',
						avatar: 'https://picsum.photos/20/20?random=101',
						user: '数码玩家',
						time: '3小时前'
					}
				],
				nearby: [
					{
						avatar: 'https://picsum.photos/50/50?random=200',
						name: '小陈同学',
						distance: '800米',
						desc: '出闲置书籍，都是考研资料，几乎全新',
						imgs: [
							'https://picsum.photos/100/100?random=210',
							'https://picsum.photos/100/100?random=211',
							'https://picsum.photos/100/100?random=212'
						],
						price: 150
					},
					{
						avatar: 'https://picsum.photos/50/50?random=201',
						name: '小王学长',
						distance: '1.5公里',
						desc: '毕业了，出一台笔记本电脑，联想小新Pro14',
						imgs: [
							'https://picsum.photos/100/100?random=220',
							'https://picsum.photos/100/100?random=221'
						],
						price: 3200
					}
				]
			}
		},
		methods: {
			goToSearch() {
				uni.navigateTo({
					url: '/pages/product/list'
				});
			}
		}
	}
</script>

<style scoped>
	/* 只保留首页整体和导航样式，其他样式已在各自组件内 */
	.container { padding-bottom: 60px; background: #f5f5f5; min-height: 100vh; }
	.navbar { display: flex; align-items: center; justify-content: space-between; padding: 10px 16px; background: #fff; position: sticky; top: 0; z-index: 10; }
	.title { color: #FF5E5E; font-size: 20px; font-weight: bold; }
	.search-box { flex: 1; margin: 0 12px; position: relative; }
	.search-input { width: 100%; padding: 6px 30px 6px 30px; border-radius: 20px; background: #f5f5f5; border: none; font-size: 14px; }
	.search-icon { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: #a3a3a3; font-family: "iconfont"; font-size: 18px; }
	.nav-icons { display: flex; gap: 12px; }
	.icon { font-family: "iconfont"; font-size: 20px; color: #888; margin-left: 10px; }
	.tabbar { position: fixed; left: 0; right: 0; bottom: 0; height: 50px; background: #fff; display: flex; justify-content: space-around; align-items: center; border-top: 1px solid #eee; z-index: 100; }
	.tabbar-item { display: flex; flex-direction: column; align-items: center; font-size: 12px; color: #888; }
	.tabbar-item.active { color: #FF5E5E; }
	.tabbar-item.plus { width: 48px; height: 48px; background: #FF5E5E; border-radius: 50%; color: #fff; display: flex; align-items: center; justify-content: center; margin-top: -24px; font-size: 22px; }
	.tabbar-icon { font-size: 20px; }
	.tabbar-text { margin-top: 2px; }
</style>
